<template>
  <div :class="{ all: !isFold, all_fold: isFold }">
    <div class="html-node" v-show="!isFold">
      <div class="start box">
        <p v-show="showNum">循环次数：<span @dblclick="onNumChange">{{ startNum }}</span></p>
      </div>
      <div class="break box">

      </div>


      <select name="type" id="pet-select" @change="onChange" class="type">
        <option value="FOR_NODE" :selected="props.properties.loopType == 'FOR_NODE'">FOR-节点循环</option>
        <option value="FOR_NUM" :selected="props.properties.loopType == 'FOR_NUM'">FOR-次数循环</option>
        <option value="WHILE" :selected="props.properties.loopType == 'WHILE'">WHILE</option>
        <option value="ITERATOR" :selected="props.properties.loopType == 'ITERATOR'">ITERATOR</option>
      </select>
    </div>

    <div class="main">

    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import onSpanChange from '../utils/onSpanChange';

const startNum = ref(5);


const showNum = ref(false);
const isFold = ref(false);
const props = defineProps(["callback", "properties"]);

const changeType = (type: string) => {
  showNum.value = (type === "FOR_NUM")
  props.properties.name = type.split("_")[0];
  props.properties.startNum = showNum.value ? startNum.value : -1;
  props.properties.loopType = type;
  props.properties.isFolded = isFold.value;

  props.callback(props.properties);
}

//初始化
changeType(props.properties.loopType || "FOR_NODE");
const onChange = (e: any) => {
  changeType(e.target.value)
}

//修改数字
const onNumChange = (e: MouseEvent) => {
  if (!showNum.value) return;
  onSpanChange(e, (v: string) => {
    startNum.value = Number(v);
    changeType("FOR_NUM");
  })
}

//暴露方法
const fold = (isFolded: boolean) => {
  isFold.value = isFolded;
}
defineExpose({
  fold
})
</script>

<style scoped>
.all_fold {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px solid gray;
}

.all {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  background-color: #fff;
}

.main {
  flex: 1;
  border: 1px solid gray;
}

.html-node {
  width: 100%;
  height: 90px;
  min-width: 400px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  border: 1px solid gray;
}

.box {
  height: 100%;
  width: 150px;
  flex-shrink: 0;
  border-right: 1px solid gray;
}

.start {
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  color: black !important;
}


.type {
  margin: 30px;
  flex-shrink: 1;
}

span {
  color: #fff;
}
</style>